<!-- Discord Webhooks Section for Publishing Tab -->
<div x-data="webhookManager.init()" x-init="initialize()" class="webhook-manager">
    <!-- Hidden field for storing webhook config -->
    <input type="hidden" name="--discord_webhooks" :value="JSON.stringify(webhooks)">

    <!-- Webhook List -->
    <div class="mb-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label mb-0">
                <i class="fas fa-bell me-1"></i>Configured Webhooks
            </label>
            <button type="button"
                    class="btn btn-sm btn-primary"
                    @click="showAddForm = true; editingIndex = null"
                    x-show="!showAddForm">
                <i class="fas fa-plus me-1"></i>Add Webhook
            </button>
        </div>

        <!-- Empty state -->
        <div x-show="webhooks.length === 0 && !showAddForm" x-cloak class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            No webhooks configured. Click "Add Webhook" to receive training notifications.
        </div>

        <!-- Webhook cards -->
        <div class="webhook-list">
            <template x-for="(webhook, index) in webhooks" :key="index">
                <div class="card mb-2">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="badge"
                                          :class="webhook.webhook_type === 'discord' ? 'bg-indigo' : 'bg-secondary'"
                                          x-text="getWebhookTypeBadge(webhook.webhook_type)"></span>
                                    <span class="badge"
                                          :class="getLogLevelBadgeClass(webhook.log_level)"
                                          x-text="webhook.log_level.toUpperCase()"></span>
                                    <span x-show="webhook.message_prefix"
                                          class="text-muted small"
                                          x-text="'Prefix: ' + webhook.message_prefix"></span>
                                </div>
                                <div class="small font-monospace text-truncate"
                                     :title="webhook.webhook_url || webhook.callback_url"
                                     x-text="webhook.webhook_url || webhook.callback_url"></div>
                            </div>
                            <div class="d-flex gap-1">
                                <button type="button"
                                        class="btn btn-sm btn-outline-primary"
                                        @click="editWebhook(index)"
                                        title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger"
                                        @click="deleteWebhook(index)"
                                        title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Add/Edit Form -->
    <div x-show="showAddForm" x-cloak class="card border-primary mb-3">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-plus-circle me-2"></i>
            <span x-text="editingIndex !== null ? 'Edit Webhook' : 'Add Webhook'"></span>
        </div>
        <div class="card-body">
            <!-- Webhook Type -->
            <div class="mb-3">
                <label class="form-label">Webhook Type <span class="text-danger">*</span></label>
                <select x-model="newWebhook.webhook_type" class="form-select">
                    <option value="discord">Discord</option>
                    <option value="raw">Custom (Raw JSON)</option>
                </select>
                <div class="form-text">
                    <template x-if="newWebhook.webhook_type === 'discord'">
                        <span>Discord webhooks receive formatted messages with images</span>
                    </template>
                    <template x-if="newWebhook.webhook_type === 'raw'">
                        <span>Custom webhooks receive raw JSON payloads</span>
                    </template>
                </div>
            </div>

            <!-- Webhook URL (Discord) or Callback URL (Raw) -->
            <div class="mb-3">
                <label class="form-label">
                    <span x-text="newWebhook.webhook_type === 'discord' ? 'Discord Webhook URL' : 'Callback URL'"></span>
                    <span class="text-danger">*</span>
                </label>
                <!-- Discord webhook URL -->
                <input x-show="newWebhook.webhook_type === 'discord'"
                       type="password"
                       x-model="newWebhook.webhook_url"
                       class="form-control font-monospace"
                       placeholder="https://discord.com/api/webhooks/...">
                <!-- Raw callback URL -->
                <input x-show="newWebhook.webhook_type === 'raw'"
                       type="password"
                       x-model="newWebhook.callback_url"
                       class="form-control font-monospace"
                       placeholder="https://example.com/callback">
                <div class="form-text">
                    <template x-if="newWebhook.webhook_type === 'discord'">
                        <span>
                            <i class="fas fa-lock me-1"></i>
                            Get from Discord: Server Settings → Integrations → Webhooks
                        </span>
                    </template>
                    <template x-if="newWebhook.webhook_type === 'raw'">
                        <span>URL that accepts POST requests with JSON data (structured events)</span>
                    </template>
                </div>
            </div>

            <!-- Message Prefix (Discord only) -->
            <div class="mb-3" x-show="newWebhook.webhook_type === 'discord'">
                <label class="form-label">Message Prefix (Optional)</label>
                <input type="text"
                       x-model="newWebhook.message_prefix"
                       class="form-control"
                       placeholder="My Training">
                <div class="form-text">Prefix for all Discord messages</div>
            </div>

            <!-- Log Level -->
            <div class="mb-3">
                <label class="form-label">Minimum Log Level <span class="text-danger">*</span></label>
                <select x-model="newWebhook.log_level" class="form-select">
                    <option value="debug">Debug (All messages)</option>
                    <option value="info">Info (Normal progress)</option>
                    <option value="warning">Warning (Issues only)</option>
                    <option value="error">Error (Errors only)</option>
                    <option value="critical">Critical (Critical errors only)</option>
                </select>
                <div class="form-text">Only send messages at this level or higher</div>
            </div>

            <!-- Actions -->
            <div class="d-flex gap-2">
                <button type="button"
                        class="btn btn-primary"
                        @click="addWebhook()">
                    <i class="fas fa-save me-1"></i>
                    <span x-text="editingIndex !== null ? 'Update' : 'Add'"></span>
                </button>
                <button type="button"
                        class="btn btn-secondary"
                        @click="cancelEdit()">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
            </div>
        </div>
    </div>

    <!-- Info Box -->
    <div class="alert alert-info mb-0">
        <i class="fas fa-info-circle me-2"></i>
        <strong>Note:</strong> The WebUI callback is automatically configured and doesn't need to be added here.
    </div>
</div>

<style>
.webhook-manager .bg-indigo {
    background-color: #6366f1 !important;
}

.webhook-manager .webhook-list {
    max-height: 400px;
    overflow-y: auto;
}

.webhook-manager [x-cloak] {
    display: none !important;
}
</style>
